.file {
    position: relative;
    display: inline-block;
    background: #4498ff;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 12px 18px;
    overflow: hidden;
    font-family: 黑体;
    color: #ffffff;
    text-decoration: none;
    text-indent: 0px;
    line-height: 20px;
}
.file input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
}
.file:hover {
    background: #75b7ff;
    border-color: transparent;
    color: #ffffff;

    text-decoration: none;
}
.file:focus{
    outline: none;
}
.file1 {
    position: relative;
    display: inline-block;
    background: #ff7daa;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 6px 24px;
    overflow: hidden;
    font-family: 黑体;
    color: #ffffff;
    text-decoration: none;
    text-indent: 0px;
    line-height: 20px;
}
.file1 input {
     position: absolute;
     font-size: 100px;
     right: 0;
     top: 0;
     opacity: 0;
 }
.file1:hover {
    background: #ff96ac;
    border-color: transparent;
    color: #ffffff;

    text-decoration: none;
}
.file1:focus{
    outline: none;
}
.file2 {
    position: relative;
    display: inline-block;
    background: #ffffff;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 6px 24px;
    overflow: hidden;
    font-family: 黑体;
    color: #adadad;
    text-decoration: none;
    text-indent: 0px;
    line-height: 20px;
}
.file2 input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
}
.file2:hover {
    background: #f0f0f0;
    border-color: transparent;
    color: #ff96ac;

    text-decoration: none;
}
.file2:focus{
    outline: none;
}
.text:focus{
    border: 1px solid #00b5e5;
}